{% extends 'cinema/admin/base_admin.html' %}
{% load static %}

{% block title %}电影管理 - 电影院票务管理系统{% endblock %}
{% block page_title %}电影管理{% endblock %}

{% block content %}
<!-- 页面头部 -->
<div class="d-flex justify-content-between align-items-center mb-4">
    <div>
        <h2 class="mb-1"><i class="fas fa-film me-2"></i>电影管理</h2>
        <p class="text-muted mb-0">管理所有电影信息，包括添加、编辑、删除和状态控制</p>
    </div>
    <a href="{% url 'add_movie' %}" class="btn btn-primary btn-admin">
        <i class="fas fa-plus me-2"></i>添加电影
    </a>
</div>

<!-- 筛选和搜索 -->
<div class="admin-card mb-4">
    <div class="card-body">
        <div class="row">
            <div class="col-md-4">
                <label class="form-label">状态筛选</label>
                <select class="form-select" id="statusFilter">
                    <option value="">全部状态</option>
                    <option value="active">正在上映</option>
                    <option value="inactive">已下映</option>
                    <option value="upcoming">即将上映</option>
                </select>
            </div>
            <div class="col-md-4">
                <label class="form-label">类型筛选</label>
                <select class="form-select" id="genreFilter">
                    <option value="">全部类型</option>
                    <option value="动作">动作</option>
                    <option value="喜剧">喜剧</option>
                    <option value="爱情">爱情</option>
                    <option value="科幻">科幻</option>
                    <option value="恐怖">恐怖</option>
                    <option value="动画">动画</option>
                    <option value="剧情">剧情</option>
                </select>
            </div>
            <div class="col-md-4">
                <label class="form-label">搜索电影</label>
                <div class="search-box">
                    <i class="fas fa-search"></i>
                    <input type="text" class="form-control" id="movieSearch" placeholder="搜索电影名称、导演或演员...">
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 电影列表 -->
{% if movies %}
    <div class="admin-card">
        <div class="card-header">
            <h5 class="mb-0"><i class="fas fa-list me-2"></i>电影列表 ({{ movies|length }} 部)</h5>
        </div>
        <div class="card-body">
            <div class="table-responsive">
                <table class="table table-hover">
                    <thead>
                        <tr>
                            <th style="width: 80px;">海报</th>
                            <th>电影信息</th>
                            <th>类型</th>
                            <th>时长</th>
                            <th>评分</th>
                            <th>票价</th>
                            <th>状态</th>
                            <th style="width: 150px;">操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for movie in movies %}
                            <tr data-status="{{ movie.is_active|yesno:'active,inactive' }}" data-genre="{{ movie.genre }}">
                                <td>
                                    {% if movie.poster %}
                                        <img src="{{ movie.poster.url }}" alt="{{ movie.title }}" 
                                             class="rounded" style="width: 60px; height: 80px; object-fit: cover;">
                                    {% else %}
                                        <div class="bg-secondary rounded d-flex align-items-center justify-content-center" 
                                             style="width: 60px; height: 80px;">
                                            <i class="fas fa-film text-white"></i>
                                        </div>
                                    {% endif %}
                                </td>
                                <td>
                                    <div>
                                        <h6 class="mb-1">{{ movie.title }}</h6>
                                        <p class="text-muted mb-1 small">导演：{{ movie.director }}</p>
                                        <p class="text-muted mb-0 small">演员：{{ movie.actors|truncatechars:30 }}</p>
                                        <small class="text-muted">上映：{{ movie.release_date|date:"Y-m-d" }}</small>
                                    </div>
                                </td>
                                <td>
                                    <span class="badge bg-info badge-admin">{{ movie.genre }}</span>
                                </td>
                                <td>
                                    <span class="text-muted">{{ movie.duration }}分钟</span>
                                </td>
                                <td>
                                    <div class="d-flex align-items-center">
                                        <i class="fas fa-star text-warning me-1"></i>
                                        <span class="fw-bold">{{ movie.rating }}</span>
                                    </div>
                                </td>
                                <td>
                                    <span class="badge bg-success badge-admin">¥{{ movie.price }}</span>
                                </td>
                                <td>
                                    {% if movie.is_active %}
                                        <span class="badge bg-success badge-admin">
                                            <i class="fas fa-eye me-1"></i>上映中
                                        </span>
                                    {% else %}
                                        <span class="badge bg-secondary badge-admin">
                                            <i class="fas fa-eye-slash me-1"></i>已下映
                                        </span>
                                    {% endif %}
                                </td>
                                <td>
                                    <div class="btn-group" role="group">
                                        <a href="{% url 'edit_movie' movie.id %}" class="btn btn-sm btn-outline-primary" 
                                           title="编辑">
                                            <i class="fas fa-edit"></i>
                                        </a>
                                        <button type="button" class="btn btn-sm btn-outline-warning" 
                                                onclick="toggleMovieStatus({{ movie.id }}, '{{ movie.title }}')"
                                                title="切换状态">
                                            {% if movie.is_active %}
                                                <i class="fas fa-eye-slash"></i>
                                            {% else %}
                                                <i class="fas fa-eye"></i>
                                            {% endif %}
                                        </button>
                                        <button type="button" class="btn btn-sm btn-outline-danger" 
                                                onclick="deleteMovie({{ movie.id }}, '{{ movie.title }}')"
                                                title="删除">
                                            <i class="fas fa-trash"></i>
                                        </button>
                                    </div>
                                </td>
                            </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>
    </div>
{% else %}
    <div class="admin-card">
        <div class="card-body text-center py-5">
            <i class="fas fa-film fa-4x text-muted mb-4"></i>
            <h4 class="text-muted mb-3">暂无电影信息</h4>
            <p class="text-muted mb-4">点击上方"添加电影"按钮开始添加您的第一部电影</p>
            <a href="{% url 'add_movie' %}" class="btn btn-primary btn-admin">
                <i class="fas fa-plus me-2"></i>添加电影
            </a>
        </div>
    </div>
{% endif %}

<!-- 批量操作 -->
{% if movies %}
    <div class="admin-card mt-4">
        <div class="card-header">
            <h5 class="mb-0"><i class="fas fa-tasks me-2"></i>批量操作</h5>
        </div>
        <div class="card-body">
            <div class="row">
                <div class="col-md-3">
                    <button type="button" class="btn btn-success btn-admin w-100" onclick="batchActivate()">
                        <i class="fas fa-eye me-2"></i>批量激活
                    </button>
                </div>
                <div class="col-md-3">
                    <button type="button" class="btn btn-warning btn-admin w-100" onclick="batchDeactivate()">
                        <i class="fas fa-eye-slash me-2"></i>批量下映
                    </button>
                </div>
                <div class="col-md-3">
                    <button type="button" class="btn btn-info btn-admin w-100" onclick="batchUpdateRating()">
                        <i class="fas fa-star me-2"></i>更新评分
                    </button>
                </div>
                <div class="col-md-3">
                    <button type="button" class="btn btn-danger btn-admin w-100" onclick="batchDelete()">
                        <i class="fas fa-trash me-2"></i>批量删除
                    </button>
                </div>
            </div>
        </div>
    </div>
{% endif %}
{% endblock %}

{% block extra_js %}
<script>
// 筛选功能
document.getElementById('statusFilter').addEventListener('change', filterMovies);
document.getElementById('genreFilter').addEventListener('change', filterMovies);
document.getElementById('movieSearch').addEventListener('input', filterMovies);

function filterMovies() {
    const statusFilter = document.getElementById('statusFilter').value;
    const genreFilter = document.getElementById('genreFilter').value;
    const searchTerm = document.getElementById('movieSearch').value.toLowerCase();
    
    const rows = document.querySelectorAll('tbody tr');
    
    rows.forEach(row => {
        const status = row.dataset.status;
        const genre = row.dataset.genre;
        const text = row.textContent.toLowerCase();
        
        const statusMatch = !statusFilter || status === statusFilter;
        const genreMatch = !genreFilter || genre === genreFilter;
        const searchMatch = !searchTerm || text.includes(searchTerm);
        
        if (statusMatch && genreMatch && searchMatch) {
            row.style.display = '';
        } else {
            row.style.display = 'none';
        }
    });
}

// 切换电影状态
function toggleMovieStatus(movieId, movieTitle) {
    if (confirm(`确定要切换电影"${movieTitle}"的状态吗？`)) {
        const form = document.createElement('form');
        form.method = 'POST';
        form.innerHTML = `
            {% csrf_token %}
            <input type="hidden" name="action" value="toggle">
            <input type="hidden" name="movie_id" value="${movieId}">
        `;
        document.body.appendChild(form);
        form.submit();
    }
}

// 删除电影
function deleteMovie(movieId, movieTitle) {
    if (confirm(`确定要删除电影"${movieTitle}"吗？此操作不可恢复！`)) {
        const form = document.createElement('form');
        form.method = 'POST';
        form.innerHTML = `
            {% csrf_token %}
            <input type="hidden" name="action" value="delete">
            <input type="hidden" name="movie_id" value="${movieId}">
        `;
        document.body.appendChild(form);
        form.submit();
    }
}

// 批量操作
function batchActivate() {
    if (confirm('确定要激活选中的电影吗？')) {
        // 实现批量激活逻辑
        alert('批量激活功能待实现');
    }
}

function batchDeactivate() {
    if (confirm('确定要下映选中的电影吗？')) {
        // 实现批量下映逻辑
        alert('批量下映功能待实现');
    }
}

function batchUpdateRating() {
    if (confirm('确定要更新选中电影的评分吗？')) {
        // 实现批量更新评分逻辑
        alert('批量更新评分功能待实现');
    }
}

function batchDelete() {
    if (confirm('确定要删除选中的电影吗？此操作不可恢复！')) {
        // 实现批量删除逻辑
        alert('批量删除功能待实现');
    }
}
</script>
{% endblock %} 